<template>
  <div>
    <template>
      <button @click.once="addPerson">添加用户</button>
      <button @click.once="changeList">改变用户</button>
      <input type="text" v-model="filterKeywords" name="" id="" placeholder="请输入关键字">
      <ul>
        <li v-for="(person) of filterPersonList" :key="person.id">
          {{person.name}}   {{person.age}}  <input type="text" name="" id="">
        </li>
      </ul>
    </template>


  </div>
</template>

<script>
export default {
  name: 'ListFilter',

  data() {
    return {
      personList:[
                  { id: '1111111111', name: '张三', age: 29, city: '北京' },
                  { id: '2222222222', name: '李四', age: 26, city: '上海' },
                  { id: '3333333333', name: '王五', age: 33, city: '广州' },
                  { id: '4444444444', name: '赵六', age: 27, city: '深圳' },
                  { id: '5555555555', name: '刘七', age: 31, city: '杭州' },
                  { id: '6666666666', name: '陈八', age: 24, city: '南京' },
                  { id: '7777777777', name: '杨九', age: 30, city: '成都' },
                  { id: '8888888888', name: '黄十', age: 28, city: '武汉' },
                  { id: '9999999999', name: '周十一', age: 34, city: '重庆' },
                  { id: '1010101010', name: '吴十二', age: 32, city: '天津' },
                  { id: '1212121212', name: '朱十三', age: 25, city: '西安' },
                  { id: '1313131313', name: '冯十四', age: 23, city: '长沙' },
                  { id: '1414141414', name: '韩十五', age: 29, city: '郑州' },
                  { id: '1515151515', name: '马十六', age: 27, city: '青岛' },
                  { id: '1616161616', name: '刘十七', age: 26, city: '无锡' },
                  { id: '1717171717', name: '赵十八', age: 30, city: '福州' },
                  { id: '1818181818', name: '钱十九', age: 28, city: '合肥' },
                  { id: '1919191919', name: '孙二十', age: 33, city: '苏州' },
                  { id: '2020202020', name: '李廿一', age: 31, city: '宁波' },
                  { id: '2121212121', name: '王廿二', age: 24, city: '厦门' }
                ],
     filterKeywords:"",
     filterPersonList:[]
    };
  },

    watch:{
      filterKeywords:{
        immediate:true,
        deep:true,
        handler(){
          this.filterPersonList= this.personList.filter(item=>{
            return item.name.includes(this.filterKeywords)
        })
        }
       
      },
    },
  computed:{
      // filterPersonList(){
      //   return this.personList.filter(item=>{
      //       return item.name.includes(this.filterKeywords)
      //   })
      // }
  },
  mounted() {
    
  },

  methods: {
    addPerson(){
      let person = { id: '41234138290', name: '三三三', age: 53, city: '厦门' }
      this.personList.unshift(person)
    },
    changeList(){
      // this.filterPersonList.shift();
    }
  },
};
</script>